<template>
  <div class="content-section subscriptions-section">
    <div class="section-header">
      <h2 class="section-title">我的订阅</h2>
    </div>
    <div v-if="dataList.length > 0">
      <n-grid x-gap="12" :cols="4">
        <n-gi v-for="course in dataList" :key="course.id" class="course-card">
          <div class="course-cover-container">
            <img
              v-if="course.courseCoverUrl"
              :src="course.courseCoverUrl"
              :alt="course.courseTitle"
              class="course-cover"
            />
            <div v-else class="no-image" style="height: 140px">
              <span>{{ course.courseTitle }}</span>
            </div>
            <!--          <div class="course-progress-badge">{{ course.progress }}%</div>-->
          </div>

          <div class="course-info">
            <h4 class="course-title">{{ course.courseTitle }}</h4>
            <p class="course-teacher">
              {{ course.lecturer?.username || '官方' }}
            </p>
            <div class="progress-container">
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: course.progress + '%' }"></div>
              </div>
            </div>
            <div class="course-actions">
              <span class="progress-text">观看至：{{ course.progress }}</span>
              <button class="btn-continue">继续学习</button>
            </div>
          </div>
        </n-gi>
      </n-grid>

      <div class="flex justify-center margin-top-20">
        <n-pagination
          v-model:page="pageNum"
          :page-count="pages"
          size="large"
          :on-update:page="pageUpdate"
        />
      </div>
    </div>
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <span class="loading-text">加载中...</span>
    </div>
    <div v-if="!loading && dataList.length === 0" class="empty-state"> 暂无订阅 </div>
  </div>
</template>

<script lang="ts" setup>
  import { subscribeCourseListApi } from '@/api/course';
  import { ref, onMounted } from 'vue';

  // 分页参数
  const pageNum = ref(1);
  const pageSize = 10;
  const loading = ref(false);
  const isLastPage = ref(false);
  const pages = ref(0);
  const dataList = ref<any[]>([]);

  async function loadData() {
    if (loading.value || isLastPage.value) return;

    loading.value = true;
    try {
      const params = {
        pageNum: pageNum.value,
        pageSize: pageSize,
      };

      const data: any = await subscribeCourseListApi(params);
      dataList.value = data.records || [];
      pages.value = data.pages;
      if (dataList.value.length < 10) {
        isLastPage.value = true;
      }
    } catch (error) {
      console.error('error:', error);
    } finally {
      loading.value = false;
    }
  }

  function resetPage() {
    pageNum.value = 1;
    isLastPage.value = false;
    dataList.value = [];
  }

  function pageUpdate(num: any) {
    pageNum.value = num;
    loadData();
  }
  onMounted(() => {
    loadData();
  });
</script>

<style lang="less">
  // 我的订阅模块
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  .course-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #f1f5f9;
    margin-bottom: 15px;

    .course-cover-container {
      position: relative;
      overflow: hidden;

      .course-cover {
        width: 100%;
        height: 140px;
        object-fit: cover;
        transition: transform 0.3s ease;
      }

      .course-progress-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        background: rgba(80, 200, 120, 0.9);
        color: white;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
      }

      &:hover .course-cover {
        transform: scale(1.05);
      }
    }

    .course-info {
      padding: 12px;

      .course-title {
        margin: 0 0 8px;
        font-size: 16px;
        font-weight: 600;
        color: #1e293b;
        line-height: 1.4;
        // 文本截断
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .course-teacher {
        margin-bottom: 12px;
        color: #64748b;
        font-size: 14px;
        font-weight: 500;
        // 文本截断
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .course-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .progress-text {
          font-size: 12px;
          color: #64748b;
          font-weight: 500;
        }

        .btn-continue {
          background: #50c878;
          color: white;
          border: none;
          padding: 6px 12px;
          border-radius: 20px;
          font-size: 12px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;

          &:hover {
            background: #4a90e2;
            transform: translateY(-1px);
          }
        }

        .btn-favorite {
          background: none;
          border: none;
          font-size: 18px;
          cursor: pointer;
          padding: 8px;
          border-radius: 50%;
          transition: all 0.3s ease;

          &:hover {
            background: #fef2f2;
            transform: scale(1.1);
          }
        }
      }
    }
  }
</style>
